<template>
  <div>
    <router-view></router-view>
    <p class="welcome">欢迎进入</p>
    <h2 id="tit">公告</h2>
    <div class="wrap" id="wrap" v-loading="loading">
      <template>
        <div class="notice" v-for="item in noticeData" :key="item.tit" :value="item">
          <div class="tit">{{item.title}}</div>
          <div class="text">{{item.content}}</div>
          <div class="date">{{item.pubTime}}</div>
        </div>
      </template>
    </div>
    <div id="pages">
      <el-pagination @current-change="handleCurrentChange" @size-change="handlePageSize" background
        :current-page="currentPage" layout="prev, pager, next" :total="total" :page-size="pagesize">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  // el: "#wrap",
  data () {
    return {
      total: 20,
      pagesize: 4,
      currentPage: 1,
      time: new Date(this.pubTime * 1000).toLocaleString(),
      loading: true,
      noticeData: [
        {
          id: '',
          title: '',
          content: '',
          pubTime: '',
          manId: '',
          powId: ''
        },
        {
          id: '1',
          title: '公告一',
          content: '117水管',
          pubTime: '2021年11月10日',
          manId: '2',
          powId: '2'
        },
        {
          id: '2',
          title: '公告二',
          content: '114修小王',
          pubTime: '2021年11月10日',
          manId: '2',
          powId: '2'
        },
        {
          id: '2',
          title: '公告三',
          content: '114修小王脑壳',
          pubTime: '2021年11月10日',
          manId: '2',
          powId: '2'
        },
      ],
    }
  },
  filters: {

  },
  computed: {
  },
  methods: {

    test () {
      // this.timeData.times = this.noticeData.pubTime
      // console.log(this.timeData)
      // console.log(this.noticeData)
    },



    // 分页获取公告

    checkNotice () {
      this.$axios.defaults.headers.token = localStorage.getItem('token');
      this.$axios.get('/allNotice', {
        params: {
          rows: this.pagesize,
          page: this.currentPage
        },
      }).then(res => {

        console.log(res);
        this.noticeData = res.data.data.allNotice;
        if (res.data.code == 200) {
          this.loading = false
          // this.$message('查询成功')
          // console.log()
        } else {
          this.$message('查询失败')
          console.log(this.time)
        }
      })
    },

    // 分页组件
    handleCurrentChange (val) {
      this.currentPage = val
      this.loading = true;
      // console.log('当前页:');
      // console.log(this.currentPage);
      this.checkNotice();

    },
    handlePageSize (val) {
      this.currentPage = val
      // console.log('条数:');
      // console.log(val);
      // console.log(this.currentPage);
    },


  },
  mounted () {
    this.checkNotice();
    this.test()
  },
}
</script>
<style scoped>
.welcome {
  font-size: 0.3rem;
  margin: 0.2rem !important;
  margin-left: 10px !important;
  font-weight: bold;
}
#tit {
  display: block;
  height: 50px;
  padding-left: 30px !important;
  margin-bottom: 20px !important;
  line-height: 50px;
  font-size: 0.3rem;
  background: #f3f7f8;
}
#wrap li {
  list-style: none;
  padding: 20px !important;
  margin-top: 20px !important;
  border-top: 1px solid #666;
}
#pages {
  margin-right: 10px !important;
  margin-top: 50px !important;
  float: right;
}
::v-deep .el-table {
  margin-top: 50px !important;
}
::v-deep .el-table th {
  border-color: #bbb;
}
::v-deep .el-table tr th,
::v-deep .el-table tr td {
  text-align: center;
}
::v-deep .el-table tr th {
  height: 50px;
  background: #eee;
}
.timer {
  float: right;
}
.notice {
  box-sizing: border-box;
  padding-top: 10px !important;
  padding-left: 20px !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border: 1px solid #eee;
  height: 90px;
  width: 100%;
}
.notice .tit {
  font-weight: bold;
  font-size: 0.3rem;
}
.notice .text {
  margin-top: 10px !important;
  color: #666;
  font-size: 0.2rem;
}
.notice .date {
  color: #666;
  float: right;
  margin-right: 20px !important;
}
</style>